<span page-title ng-model="product">{{ 'Details for Product:' | translate }} {{ product.name }}</span>

<div data-extend-template="layouts/details-page-with-breadcrumbs.html">
  <header data-block="header">
    <h2 translate>{{ product.name }}</h2>
  </header>

  <nav data-block="item-actions" bst-feature-flag="custom_products">
    <span select-action-dropdown>
      <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu">
        <li role="menuitem" ng-hide="denied('sync_products', product)">
          <a ng-click="syncProduct()">
            <span translate>Sync Now</span>
          </a>
        </li>

        <li role="menuitem" ng-hide="denied('create_sync_plans')">
          <a ng-click="openSyncPlanModal()">
            <span translate>New Sync Plan</span>
          </a>
        </li>

        <li class="divider" bst-feature-flag="custom_products" ng-hide="denied('delete_products')"></li>

        <li role="menuitem" bst-feature-flag="custom_products" ng-hide="denied('delete_products')">
          <a ng-click="openModal()" ng-show="productDeletable(product)">
            <span translate>Remove Product</span>
          </a>

          <span class="disabled" ng-hide="productDeletable(product)">
            <span translate>Cannot Remove</span>

            <span ng-switch="getReadOnlyReason(product)" bst-feature-flag="custom_products">
              <i class="fa fa-question-circle" ng-switch-when="permissions"
                 uib-tooltip="{{ 'You cannot remove this product because you do not have permission.' | translate }}"
                 tooltip-animation="false"
                 tooltip-append-to-body="true">
              </i>
              <i class="fa fa-question-circle" ng-switch-when="published"
                 uib-tooltip="{{ 'You cannot remove this product because it was published to a content view.' | translate }}"
                 tooltip-animation="false"
                 tooltip-append-to-body="true">
              </i>
              <i class="fa fa-question-circle" ng-switch-when="redhat"
                 uib-tooltip="{{ 'You cannot remove this product because it is a Red Hat product.' | translate }}"
                 tooltip-animation="false"
                 tooltip-append-to-body="true">
              </i>
            </span>
          </span>
        </li>
      </ul>
    </span>

    <div bst-modal="removeProduct(product)" model="product">
      <div data-block="modal-header" translate>Remove Product "{{ product.name }}"?</div>
      <div data-block="modal-body" translate>Are you sure you want to remove product "{{ product.name }}"?</div>
    </div>
  </nav>

  <nav data-block="navigation">
    <ul class="nav nav-tabs details-nav">
      <li ng-class="{active: stateIncludes('product.info')}">
        <a translate
           ui-sref="product.info({productId: product.id})">
          Details
        </a>
      </li>
      <li ng-class="{active: stateIncludes('product.repositories')}">
        <a translate
           ui-sref="product.repositories({productId: product.id})">
          Repositories
        </a>
      </li>
      <li ng-class="{active: stateIncludes('product.tasks')}">
        <a translate
           ui-sref="product.tasks.index({productId: product.id})">
          Tasks
        </a>
      </li>
      <li ng-repeat="menuItem in menuExpander.getMenu('product')">
        <a href="{{ menuItem.url }}">
          {{ menuItem.label }}
        </a>
      </li>
    </ul>
  </nav>

  <div data-block="content">
    <section ui-view></section>
  </div>
</div>